<template>
  <div class="table">
    <!-- 属性组合表格组件 -->
    <div v-if="thead.length === 0">暂无属性组合</div>

    <table v-else border="1" cellspacing="0" cellpadding="0">
        <thead >
            <tr>
                <th v-for="(item, i) in thead" :key="i">{{item}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, i) in tbody" :key="i">
                <td v-for="(td, ind) in item" :key="ind">{{td}}</td>
            </tr>
        </tbody>
    </table>
 </div>
</template>

<script>
import store from '../store'
import { toRefs } from 'vue'
export default {
    setup() {
        return {
            ...toRefs(store.state)
        }
    }
}
</script>

<style scoped>
.table {
margin-top: 20px;}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: center;}
</style>